/*
 * @Description: 充值方式
 * @Author: ziwei.ma
 * @Date: 2019-05-05 15:43:42
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-23 18:24:52
 */
<template>
  <div class="payment-method-wrapper flex-v">
    <div class="payment-method-selection flex-v">
      <div
        class="payment-wrapper flex-h flex-hsb"
        v-for="(option,index) in isSelectedPayment"
        :key="index"
        @click="changedPayment(index)"
        :class="[index === selectedBorTop?'payment-wrapper':'payment-wrapper-border']"
      >
        <!-- 支付方式的icon图标 -->
        <div class="payment-wrapper-img flex-vc">
          <img :src="option.paymentIcon">
          <span class="fontsize28">{{option.paymentName}}</span>
        </div>
        <!-- 支付方式勾选框 -->
        <span
          class="payment-selected icon iconfont icon-choose"
          :class="[index === selectedFstPay ? BgColorClass : 'payment-selected-unactive' ]"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import { browser } from 'vue-xiaobu-utils'
import { PayMentModel } from '../model/PayMentModel'
export default {
  data() {
    return {
      isSelectedPayment: [],
      // 选中的支付方式是否为第一个
      selectedFstPay: 0,
      // 支付方式选项列表是否为第一个
      selectedBorTop: 0,
      payMode: '',
      supportPayModes: '',
      // 获取到的支付方式
      isPayment: ''
    }
  },
  props: {
    cardType: {
      type: String, default: 'BusCard'
    }
  },
  computed: {
    // 支付勾选效果
    BgColorClass() {
      if (this.cardType === 'BusCard') {
        return 'baseBgColorNoActive'
      } else {
        return 'staffBgColor'
      }
    }
  },
  mounted() {
    // 判断是否从移动设备打开
    if (browser && browser.versions && browser.versions.mobile) {
      var ua = window.navigator.userAgent.toLowerCase() // 获取判断用的对象
      if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        // 判断是否为微信浏览器内页面
        this.payMode = 'WXJSPAY'
        this.supportPayModes = ['WXJSPAY']
      }
    }
    // 获取支付方式列表
    // this.$getPaymentSupportList().then(arrstr => {
    //   console.log('getPaymentSupportList：' + arrstr)
    //   if (arrstr.length > 0) {
    //     let arr = JSON.parse(arrstr)
    //     let payConfig = window.PAYMENT_CONFIG_LIST
    //     if (window.WAP_PAYMENT_LIST) {
    //       window.WAP_PAYMENT_LIST.forEach(item => {
    //         this.isSelectedPayment.push(new PayMentModel(item, payConfig[item].ICON_URL, payConfig[item].NAME))
    //       })
    //     }
    //     arr.forEach(item => {
    //       this.isSelectedPayment.push(new PayMentModel(item, payConfig[item].ICON_URL, payConfig[item].NAME))
    //     })
    //     this.changedPayment(0)
    //   }
    // },
    // err => {
    //   console.dir(err)
    // }
    // )
    window.getAllSupportPaymentList(1, 6, arrstr => {
      arrstr.forEach(item => {
        this.isSelectedPayment.push(new PayMentModel(item.TYPE, item.ICON_URL, item.NAME))
      })
      this.changedPayment(0)
    }, err => {
      console.dir(err)
    })
  },
  methods: {
    changedPayment(index) {
      this.selectedFstPay = index
      this.$emit('setPayments', this.isSelectedPayment[index].paymentType)
    }
  }
}
</script>

<style scoped>
.payment-method-wrapper {
  width: 750px;
  background: #ffffff;
  /* margin-top: 16px; */
  margin-bottom: 13px;
}
/* 优惠券选择栏 */
.coupon-wrapper {
  height: 80px;
  border-bottom: 1px solid #cccccc;
}
.coupon-wrapper > span {
  margin: 20px 30px;
  color: #333333;
}
.coupon-selection {
  margin: 20px 30px;
}
.coupon-selection > span {
  color: #cccccc;
  margin-right: 33px;
}
/* 支付宝&微信选择 */
.payment-method-selection {
  width: 690px;
  padding: 0 30px;
}

.payment-wrapper {
  height: 100px;
}
.payment-wrapper-border {
  height: 100px;
  border-top: 1px solid #eeeeee; /*no*/
}

/* 支付方式的icon-img包裹层 */
.payment-wrapper-img {
  margin: auto 0;
  line-height: 50px;
}

.payment-wrapper-img > img {
  width: 50px;
  height: 50px;
  margin-right: 22px;
}

/* 支付方式勾选 */
.payment-selected {
  display: inline-block;
  width: 30px; /*px*/
  height: 30px; /*px*/
  border-radius: 50%;
  box-sizing: border-box;
  margin: 35px 0;
  color: #ffffff;
  font-size: 22px;
  line-height: 38px;
  text-align: center;
}

/* 选中效果 */
/* .payment-selected-active {
  background-color: #28acff;
} */
/* 未选中效果 */
.payment-selected-unactive {
  border: 1px solid #cccccc; /*no*/
}

/* 员工卡背景颜色 */
.staffBgColor {
  background-color: #19b2de;
}
</style>
